My Site Design Checklist
by Mitchell Harper


Every week I receive an overwhelming number of emails from people
who ask me to critique their Websites for design and usability
flaws. Hopefully though, if you use a sound process to develop
your site, you won't need a critique. 

Here are the basic elements I consider each time I design a site
-- using these as a checklist, I can be sure I've covered all the
Web design essentials in each design I complete. Try these tips
and check off each point in the list when you create your next
site!

[#1: Select A Color Scheme And Stick To It]

One day while surfing around, you decide to check out a new link.
When it loads in your browser, you notice that the home page is
colored in red, black and gray. Then you click on a link to, for
instance, the About Us page, and you're greeted with a yellow and
green page adorned by blue text.

This sort of inconsistent coloring is enough to deter visitors
from ever coming back to a site -- not only is it hard on the
eyes, but it screams a lack of professionalism.

Before you even start to code your site, choose two or three
complementary colors and stick with them. If the organization
for which you're building the site has a logo or brand that uses
particular colors, you might consider using those. If you take a
look at any site of a large or successful company (try
www.coca-cola.com or www.ford.com), you'll see that, even when
different sub-sections of a site are color-coded, the brand
colors are carried across every page of the site.

Take a look at other sites that you like: what colors do they use
and how do they use them? Do they gradually introduce the colors
or are they all smack bang in the middle of the screen when you
load their home page? I've come up with a list of the five most
used color combinations around the Web:

1. Red, yellow and white
2. Blue and white
3. Red, gray and white
4. Blue, orange and white
5. Yellow, gray and white

[#2: Design For Cross-Browser Compatibility]

This is one of the most important aspects for a designer to
master. Never, ever implement either an Internet Explorer - or
Netscape-specific function into a site unless it will only be
used by a closed user group (e.g. a company Intranet).

Sure, it can be tempting to implement super-dooper DHTML effects
such as automated iFrame scrolling, but be warned: those who
don't have the latest browser installed won't take to kindly
to your ignorance of their needs. If you're desperate to
implement flying pigs or falling snowflakes on your site but
still want cross-browser compatibility, then take a look at
BrowserHawk from Cyscape <http://www.cyscape.com/products/>. 
BrowserHawk is a nifty set of COMs that allows you to detect 
all sorts of things about the client's browser, including whether 
or not they have JavaScript enabled, and the version and name 
of their browser, to name a few.

[#3: Provide An Intuitive, Easy To Use Navigation System]

Have you ever been to a site and wondered where in the world the
links to the rest of its pages are? Menu accessibility is one of
the key elements in creating a positive experience for your
site's visitors.

Most Websites either display a left-aligned, vertically
orientated menu, or a top-aligned, horizontally orientated menu
system. Surveys have shown that using either of these menu styles
(or both together, if you lay them out in a complementary format)
is guaranteed to provide your visitors with a positive site
experience. Using these familiar styles will make your users feel
comfortable moving from page to page, and means they won't have
to hit the back button every time they want to return to the
home page.

To see what I mean, spend a couple of minutes moving around
Amazon.com. Now, spend the same amount of time at the site at
www.isonsw.com.au. Which site's menu system did you feel
comfortable with? I'm sure you answered Amazon's, because it
was consistent, easy to use, and made it blatantly obvious which
page you were on, no matter where you were on the site. When you
develop a new site, you should prototype at least three menu
systems and ask friends, family and work colleagues which one
they would prefer to use and why.

[#4: Use Cascading Style Sheets]

Cascading Style Sheets (CSS) allow you to develop a specific set
of style classes, which you can implement throughout your site.
Style sheets can also be used to change certain style attributes
of the built-in HTML tags, such as making the color of a <H1> tag
red, or making the background color of a <td> cell yellow, etc.

Use the color scheme you identified in tip #1 to create a variety
of styles including a bold headline, an "important points" style,
and a default text style. You may also want to change the default
style of the anchor tag so that your links match the color scheme
of your site.

[#5: Open External Links In A New Window]

One easily implemented tip that's often overlooked is this: make
sure that any links that don't take the visitor directly to a
page on your site should be opened in a new window by default.

When you think about it, this approach benefits the visitor as
much as it does yourself: they're given free reign to browse the
external link, with the option to return to your site simply by
closing the external site's browser window.

To open a link in a new window, you simply need to specify the
value "_blank" for the target attribute of the link's anchor tag.
For example, you'd use this...

<a target="_blank" href="http://www.sitetell.com">Click here</a>

...to open SiteTell.com in a new browser window.

[#6: Underline And Color Your Hyper Links]

The majority of Web users are in a hurry and pressed for time in
some way or another. Our eyes only pickup on certain things, and
these don't include hyper links that look like they're part of
the body of a document. When you're developing a new site, always
make sure that your hyper links are underlined, preferably in a
different color to the text that surrounds them.

[#7: Optimize Your Images]

One of the main reasons why so many Websites are slow is because
their images are not fully optimized. Optimizing images will
decrease their file size, which means that less data will need to
be downloaded from a site before it can be displayed. Here are
three ways to optimize your images:

1. Reduce The Image Size: 
Make sure your images are as small as possible. Crop any "white
space" around the edges - this decreases the file size of the
image.

2. Reduce The Number Of Colors: 
Many image formats including the graphical interchange format
(GIF) allow you to reduce the color depth of an image without
noticeably decreasing its visual quality. If you have an image
such as a logo, then try using a program such as PhotoShop to
decrease its color depth down from 16 bit to 8 bit. Save the
image and view it in your browser. If it still looks crisp and
clean, then save the image. Notice the difference in file size
compared to the 16-bit version?

3. Reduce Image Quality: 
If you're working with a Joint Photographic Experts Group (JPEG)
image, then you can reduce its file size by reducing its quality.
Using a program such as PhotoShop, you can specify the amount of
"loss" for the image, which in turn reduces its size.

[#8: Tell Visitors Who You Are And What You Do]

This is probably the simplest tip to implement. When a new visitor
comes to your site for the first time, they want to know who you
are and what you do straight up, especially if you sell products.

On your home page, you should have a small paragraph that tells
them exactly who you are and what you do. This will increase
their confidence in your company and, if you have what they're
after, then there's a better chance that they'll stick around.
Here's an example for a fictional site, Fred-Smith-Tools.com,
which sells gardening tools:

"Hi, thanks for stopping by Fred-Smith-Tools.com. We're based in
Los Angeles, USA and sell a wide range of gardening tools
including spades, pruning tools, clippers, spray guns and
shovels. Please scroll down this page to take a look at our
list of daily specials!"

[#9: Use Customer Testimonials]

A customer testimonial is simply a comment from one of your
site's visitors that includes some positive details of their
dealings with your organization, such as:

"I found your site last week from Google.com and I must say, I'm
really impressed with its layout and your HUGE range of products.
I ordered a CD from you on Thursday and it arrived right at my
door the next day. If only there were more sites like yours on
the Net. Great work!"

By displaying customer testimonials on your site, visitors can
see that other people have used your site or products, and found
them to be useful and valuable. Customer testimonials are also
one of the best ways to increase visitor confidence in your
business.

To display customer testimonials on your site, add a link to your
menu system named "Customer Testimonials". Link this to a page
where you display all the testimonials you've received from your
customers. Or display the testimonials in a sidebar, which links
to the page that lists them all. To actually collect
testimonials, either ask some of your customers for them
directly, or set up a feedback form on your site.

[#10: Provide Contact Details On Every Page]

One of the main sources of frustration for many Web surfers is
the lack of contact details on many sites. If you run a Website
that sells products, then many of your potential customers might
prefer placing a phone order to ordering on the Internet. So be
sure to display either a sales email address, or the phone number
for your sales hotline, in the top right hand corner of every
page.

[The Complete Checklist]

If you're a Web developer, then try to check off these tips as
you prototype each and every site you design -- but keep in mind
that these pointers are just as easily applied to existing sites. 

No doubt as you design more Websites over time, you'll come up
with a list of your own design tips and guidelines. Use them
whenever you can, and share them with newbie Web developers so
they don't make the same mistakes that you may have!

================================================================
Mitchell Harper is the author of many eBooks and he also owns
SiteTell. SiteTell is a unique viral marketing tool that lets 
your visitors tell their friends about your site using either 
email or ICQ in just seconds. SiteTell harnesses the power of 
viral marketing, making it extremely easy for you or anyone to 
let their friends, family, colleagues and others know about your 
site! Learn more at http://www.sitetell.com
================================================================